import React, { Component } from 'react';
import { Toast, Modal } from 'antd-mobile';
import './UserOrderList.less';

import * as common from 'common/common.js';

import SeperateLine from 'common/components/SeperateLine.js';
import Header from 'common/components/Header.js';
import Blank from 'common/components/blank/Blank.js';

import * as orderApi from 'common/api/OrderApi.js';

/**
 * 用户订单列表组件
 */
class UserOrderList extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
			userOrderList: [],
			modalFlag: false,
			waitReceiveOrderId: null	//确认收货临时保存id
	    }
	}    
	
	componentDidMount(){
		this.refreshUserOrderList();
	}

	refreshUserOrderList = () => {
		Toast.loading("", common.TIPS_LOADING_DURATION);
		orderApi.userOrderList({
			memberId: common.userId(),
			orderStatus: this.props.params.orderStatus,
			pageNo: 1,
			pageSize: 10
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				this.setState({
					userOrderList: result.data.list
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	//显示确定收货提示框
	showOrderReceiveDialog = (orderId) => {
		this.setState({
		  modalFlag: true,
		  waitReceiveOrderId: orderId
	  	});
	}

	//关闭确定收货提示框
	hideOrderReceiveDialog = () => {
		this.setState({
	      modalFlag: false,
		});
	}

	//确定收货
	orderReceive = () => {
		this.setState({
			modalFlag: false,
		});
		if(this.state.waitReceiveOrderId){
			Toast.loading("", common.TIPS_LOADING_DURATION);
			orderApi.orderReceive({
				orderId: this.state.waitReceiveOrderId,
			}).then(result => {
				Toast.hide();
				if(result.code == common.SUCCESS){
					this.refreshUserOrderList();
				}else{
					Toast.info(result.msg, common.TIPS_INFO_DURATION);
				}
			})
		}
	}
	
	render(){
		const { userOrderList, modalFlag } = this.state;
		return(
			<div className="userOrderList">
				{/* 确认收货弹框 */}
				<Modal
					className="modal"
					title="确定收货?"
					transparent
					maskClosable={true}
					platform="ios"
					visible={modalFlag}
					onClose={this.hideOrderReceiveDialog.bind(this)}
					footer={[{ text: '确定', onPress: this.orderReceive.bind(this)}, { text: '取消', onPress: this.hideOrderReceiveDialog.bind(this)}]}
					>
				</Modal>
				<Header title={"订单列表"}></Header>
				<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
				{
					userOrderList.length == 0 &&
					<Blank tips={"没有任何订单"}></Blank>
				}
				{
					userOrderList && userOrderList.length > 0 && 
					userOrderList.map((order, index) => {
						return(
							<div key={index}>
								<div className="orderItem">
									<div className="order_sn">
										<div>
											<span className="order_sn_text"><img src="assets/img/order.png"/>订单编号：</span>
											<span className="order_sn_value">&nbsp;{order.orderSn}</span>
										</div>
										<div>
											<span className="order_sn_value active">&nbsp;{order.showStatus}</span>
										</div>
									</div>
									<div className="order_sn">
										<div>
											<span className="order_sn_text"><img src="assets/img/account.png"/>支付金额：</span>
											<span className="order_sn_value">&nbsp;¥{common.fenToYuan(order.orderPayMoney)}</span>
										</div>
									</div>
									{/* <div className="order_goods">
										{
											order.orderItemList.map((orderItem, index) => {
												return(
													<div key={index} className="orderGoodsItemBox">
														<div className="orderGoodsItem list_item">
															<div className="content">
																<div className="list_item_img">
																	<img src={orderItem.goodsPic}/>
																</div>
																<div className="list_item_info">
																	<span className="name">{orderItem.goodsName}</span>
																	<div className="list_item_info_other">
																		<span className="price">¥ {common.fenToYuan(orderItem.goodsPrice)}</span>
																	</div>
																</div>
															</div>
														</div>
													</div>
												)
											})
										}
									</div> */}
									<ul className="order_operate">
										{
											order.status == 0 && 
											<li className="active" onClick={()=>common.gotoOrderPay({orderId: order.id, from: "userOrderList"})}>
												<span>去支付</span>
											</li>
										}
										{
											order.status == 1 && 
											<li onClick={()=>common.gotoUserOrderReturnApply({orderId: order.id, returnType: 0})}>
												<span>申请退款</span>
											</li>
										}
										{
											order.status == 2 && 
											<li className="active" onClick={()=>this.showOrderReceiveDialog(order.id)}>
												<span>确认收货</span>
											</li>
										}
										{
											(order.status == 3 || order.status == 4) && 
											<li onClick={()=>common.gotoUserOrderReturnApply({orderId: order.id, returnType: 3})}>
												<span>申请售后</span>
											</li>
										}
										{
											order.status == 3 && 
											<li className="active">
												<span>去评价</span>
											</li>
										}
									</ul>
								</div>
								<SeperateLine lineHeight={"0.2rem"} bg={"#e8e8ed"}></SeperateLine>
							</div>
						)
					})
				}
			</div>
		)
	}
}

export default UserOrderList;